import styled from "styled-components"

// 
const Border1px =(Comp,border='0.01rem 0.01rem 0.01rem 0.01rem',borderColor='orange')=>{
    return styled(Comp)`
          position: relative;
        &::after{
           content:"";
           position: absolute;
           top:-0.01rem;
           height:100%;
           width:100%;
           left: 0px;
           border-width:${()=>border};
           border-style:solid;
           border-color:${()=>borderColor};
           pointer-events:none;
           border-radius:${(props)=>{
               console.log(props);
               return props.radius
           }}rem;
           transform-origin:0 0;
        }
        @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) {
                &::after{
                    width:150%;
                    height:150%;
                    border-radius:${(props)=>{
                        return props.radius*1.5
                    }}rem;
                    transform: scale(0.667);
                } 
        }

        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
                &::after{
                    width:200%;
                    height:200%;
                    border-radius:${(props)=>{
                        return props.radius*2
                    }}rem;
                    transform: scale(0.5);
                } 
        }

        @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
                &::after{
                    width:300%;
                    height:300%;
                    border-radius:${(props)=>{
                        return props.radius*3
                    }}rem;
                    transform: scale(0.333);
                } 
        }
    `
}
export default Border1px